import { useState } from 'react'
import { Card, Table, Button, Tag, message, Tabs } from 'antd'
import { DownloadOutlined } from '@ant-design/icons'
import './index.scss'

const BorrowManagement = () => {
  const [loading, setLoading] = useState(false)
  const [activeTab, setActiveTab] = useState('all')

  // 模拟数据
  const mockData = [
    {
      key: '1',
      borrowId: 'B20240101001',
      readerName: '张三',
      readerPhone: '13800138001',
      bookName: '三体：地球往事三部曲',
      author: '刘慈欣',
      borrowTime: '2024-01-15 10:30',
      returnTime: '2024-02-15 10:30',
      actualReturnTime: null,
      status: '借阅中',
      overdueDays: 0
    },
    {
      key: '2',
      borrowId: 'B20240101002',
      readerName: '李四',
      readerPhone: '13800138002',
      bookName: '活着',
      author: '余华',
      borrowTime: '2024-01-10 14:20',
      returnTime: '2024-02-10 14:20',
      actualReturnTime: '2024-02-08 09:15',
      status: '已归还',
      overdueDays: 0
    },
    {
      key: '3',
      borrowId: 'B20240101003',
      readerName: '王五',
      readerPhone: '13800138003',
      bookName: '百年孤独',
      author: '加西亚·马尔克斯',
      borrowTime: '2024-01-05 09:15',
      returnTime: '2024-02-05 09:15',
      actualReturnTime: null,
      status: '已逾期',
      overdueDays: 5
    },
    {
      key: '4',
      borrowId: 'B20240101004',
      readerName: '赵六',
      readerPhone: '13800138004',
      bookName: '人类简史',
      author: '尤瓦尔·赫拉利',
      borrowTime: '2023-12-20 16:45',
      returnTime: '2024-01-20 16:45',
      actualReturnTime: '2024-01-25 10:20',
      status: '已归还',
      overdueDays: 5
    },
    {
      key: '5',
      borrowId: 'B20240101005',
      readerName: '钱七',
      readerPhone: '13800138005',
      bookName: '平凡的世界',
      author: '路遥',
      borrowTime: '2024-01-18 11:30',
      returnTime: '2024-02-18 11:30',
      actualReturnTime: null,
      status: '借阅中',
      overdueDays: 0
    }
  ]

  // 状态配置
  const statusConfig = {
    '借阅中': { color: 'blue', text: '借阅中' },
    '已归还': { color: 'green', text: '已归还' },
    '已逾期': { color: 'red', text: '已逾期' }
  }

  // 表格列配置
  const columns = [
    {
      title: '借阅编号',
      dataIndex: 'borrowId',
      key: 'borrowId',
      width: 140,
      align: 'center'
    },
    {
      title: '读者姓名',
      dataIndex: 'readerName',
      key: 'readerName',
      width: 100
    },
    {
      title: '联系电话',
      dataIndex: 'readerPhone',
      key: 'readerPhone',
      width: 120
    },
    {
      title: '图书名称',
      dataIndex: 'bookName',
      key: 'bookName',
      width: 200,
      ellipsis: true
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
      width: 120
    },
    {
      title: '借阅时间',
      dataIndex: 'borrowTime',
      key: 'borrowTime',
      width: 160
    },
    {
      title: '应还时间',
      dataIndex: 'returnTime',
      key: 'returnTime',
      width: 160
    },
    {
      title: '实还时间',
      dataIndex: 'actualReturnTime',
      key: 'actualReturnTime',
      width: 160,
      render: (text) => text || '-'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => (
        <Tag color={statusConfig[status].color}>
          {statusConfig[status].text}
        </Tag>
      )
    },
    {
      title: '逾期天数',
      dataIndex: 'overdueDays',
      key: 'overdueDays',
      width: 100,
      align: 'center',
      render: (days) => (
        <span style={{ color: days > 0 ? '#ff4d4f' : '#52c41a' }}>
          {days > 0 ? `${days}天` : '-'}
        </span>
      )
    }
  ]

  // 导出
  const handleExport = () => {
    message.success('开始导出数据')
  }

  // 根据Tab筛选数据
  const filteredData = mockData.filter(item => {
    if (activeTab === 'all') return true
    if (activeTab === 'borrowing') return item.status === '借阅中'
    if (activeTab === 'returned') return item.status === '已归还'
    if (activeTab === 'overdue') return item.status === '已逾期'
    return true
  })

  // 统计各状态数量
  const getStatusCount = (status) => {
    if (status === 'all') return mockData.length
    if (status === 'borrowing') return mockData.filter(item => item.status === '借阅中').length
    if (status === 'returned') return mockData.filter(item => item.status === '已归还').length
    if (status === 'overdue') return mockData.filter(item => item.status === '已逾期').length
    return 0
  }

  return (
    <div className="borrow-management-container">
      <Card className="table-card">
        <div className="tabs-header">
          <Tabs
            activeKey={activeTab}
            onChange={setActiveTab}
            className="status-tabs"
            items={[
              {
                key: 'all',
                label: `全部 (${getStatusCount('all')})`,
              },
              {
                key: 'borrowing',
                label: `借阅中 (${getStatusCount('borrowing')})`,
              },
              {
                key: 'overdue',
                label: `已逾期 (${getStatusCount('overdue')})`,
              },
              {
                key: 'returned',
                label: `已归还 (${getStatusCount('returned')})`,
              },
            ]}
          />
          <div className="tabs-actions">
            <Button icon={<DownloadOutlined />} onClick={handleExport}>
              导出数据
            </Button>
          </div>
        </div>

        <Table
          columns={columns}
          dataSource={filteredData}
          rowKey="key"
          loading={loading}
          pagination={{
            total: filteredData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100']
          }}
          scroll={{ x: 1400 }}
        />
      </Card>
    </div>
  )
}

export default BorrowManagement
